<template>
	<div class="system-add-dept-container">
		<el-drawer title="修改系统字典" v-model="showWindows" @close="onCancel">
			<el-form ref="formRef" :model="moduleResource" :rules="rules" size="small" label-width="30%" style="width: 90%">
				<el-form-item label="资源名称" prop="resourceName">
					<el-input v-model="moduleResource.resourceName" placeholder="请输入资源名称" />
				</el-form-item>
				<el-form-item label="资源类型" prop="resourceType">
					<el-select v-model="moduleResource.resourceType" placeholder="请输入资源类型" style="width: 100%">
						<el-option label="目录" :value="1"></el-option>
						<el-option label="菜单" :value="2"></el-option>
						<el-option label="按钮" :value="3"></el-option>
					</el-select>
				</el-form-item>
				<el-form-item label="是否通用菜单" prop="isGeneral">
					<el-switch v-model="moduleResource.isGeneral"></el-switch>
				</el-form-item>
				<el-form-item label="访问路径" prop="path">
					<el-input v-model="moduleResource.path" placeholder="请输入访问路径" />
				</el-form-item>
				<el-form-item label="组件地址" prop="component">
					<el-input v-model="moduleResource.component" placeholder="请输入组件地址" />
				</el-form-item>
				<el-form-item label="菜单图标" prop="icon">
					<IconSelector placeholder="请输入菜单图标" v-model="moduleResource.icon" type="all" />
				</el-form-item>
				<el-form-item label="是否必选" prop="mandatory">
					<el-switch v-model="moduleResource.mandatory"></el-switch>
				</el-form-item>
				<el-form-item label="排序" prop="sort">
					<el-input-number v-model="moduleResource.sort" placeholder="请输入字典排序" style="width: 100%" />
				</el-form-item>
				<div class="el-drawer__footer">
					<el-button @click="onCancel" size="small">取 消</el-button>
					<el-button type="primary" @click="onSubmit" size="small">确 定</el-button>
				</div>
			</el-form>
		</el-drawer>
	</div>
</template>

<script lang="ts">
import { reactive, ref, toRefs } from 'vue';
import { editModuleResourceDetail, getModuleResourceDetail } from '/@/api/sys/module/index';
import { ElMessage } from 'element-plus';
import IconSelector from '/@/components/iconSelector/index.vue';

export default {
	name: 'editDictItem',
	emits: ['initDictItemData'],
	components: { IconSelector },
	props: {},
	setup(props, context) {
		const formRef = ref();

		const state = reactive({
			showWindows: false,
			dictCode: '',
			moduleResource: {
				moduleId: '',
				resourceName: '',
				resourceType: '',
				isGeneral: false,
				path: '',
				component: '',
				icon: '',
				parentId: '',
				mandatory: false,
				sort: 0,
			},
			resourceId: '',
			rules: {
				resourceName: [{ required: true, message: '资源名称不能为空', trigger: 'blur' }],
				resourceType: [{ required: true, message: '资源类型不能为空', trigger: 'blur' }],
			},
		});

		//打开添加窗口
		const openWindows = (resourceId: any) => {
			state.resourceId = resourceId;
			getModuleResourceDetail(resourceId).then((res: any) => {
				state.moduleResource.moduleId = res.data.moduleId;
				state.moduleResource.resourceName = res.data.resourceName;
				state.moduleResource.resourceType = res.data.resourceType;
				state.moduleResource.isGeneral = res.data.isGeneral;
				state.moduleResource.path = res.data.path;
				state.moduleResource.component = res.data.component;
				state.moduleResource.icon = res.data.icon;
				state.moduleResource.parentId = res.data.parentId;
				state.moduleResource.mandatory = res.data.mandatory;
				state.moduleResource.readonly = res.data.readonly;
				state.moduleResource.sort = res.data.sort;
			});
			state.showWindows = true;
		};

		//取消
		const onCancel = () => {
			formRef.value.resetFields();
			state.showWindows = false;
		};

		//提交
		const onSubmit = () => {
			formRef.value.validate((valid: any) => {
				if (valid) {
					editModuleResourceDetail(state.moduleResource.moduleId, state.resourceId, state.moduleResource).then((res: any) => {
						if (res.code == 200) {
							onCancel();
							context.emit('initDictItemData');
						} else {
							ElMessage.error(res.message);
						}
					});
				}
			});
		};
		return {
			formRef,
			openWindows,
			onCancel,
			onSubmit,
			...toRefs(state),
		};
	},
};
</script>
